<template>
  <div class="app-date-box ac">
    <p class="app-time center">{{ time }}</p>
    <p class="app-date center">{{ date }} 星期{{ week }}</p>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import { onMounted, ref } from "vue";

const time = ref();
const date = ref();
const week = ref();
const timer = ref();

const getTimeing = () => {
  getTime();
};

const getTime = () => {
  const weekMap = {
    1: "一",
    2: "二",
    3: "三",
    4: "四",
    5: "五",
    6: "六",
    7: "日",
  };
  date.value = dayjs().format("MM月DD日");
  time.value = dayjs().format("HH:mm");
  week.value = weekMap[dayjs().day()];

  timer.value = setInterval(() => {
    getTime();
  }, 30000);
};

onMounted(() => {
  getTimeing();
});
</script>
<style lang="less" scoped>
//@import url();
.app-date-box {
  color: #fff;
  //   margin-bottom: 20px;
  .app-time {
    color: #fff;
    line-height: 50px;
    font-size: 50px;
  }
  .app-date {
    font-size: 12px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
